<template>
  <div class="et-login">
    <et-header title="登录注册" @backPage="backPage"></et-header>

    <div class="et-login-content">
      <div class="content-menu">
        <div class="menu-btn menu-title01" @click="toLoginPage">登录</div>
        <div class="menu-btn menu-title02 menu-active">注册</div>
      </div>
    </div>

    <!--登录注册From-->
    <div class="et-register-box">
      <div class="wrap-box">
        <div class="icon1"><img src="../images/login/phone.png" class="phone1"/></div>
        <div class="input-box"><input type="text" class="phone2" placeholder="请输入手机号码" maxlength="11"
                                      v-model="phone"
                                      v-on:input="checkIcon"/>
        </div>
        <div class="icon2" v-if="showIcon"><img src="../images/login/yes.png" class="phone3" onclick="return false"/>
        </div>
        <div class="icon2" v-if="hideIcon"><img src="../images/login/no.png" class="phone3" onclick="return false"/>
        </div>
      </div>
      <div class="wrap-box">
        <div class="icon3"><img src="../images/login/admin.png" class="pwd1"/></div>
        <div class="pwd-box"><input type="password" :type="pwdType" class="pwd2" placeholder="请输入6-16位密码"
                                    maxlength="16"
                                    v-model="password"/></div>
        <div class="icon4" @click="changeType"><img :src=pwdIcon class="pwd3" onclick="return false"/></div>
      </div>
      <div class="wrap-box distance">
        <div class="icon3"><img src="../images/login/code.png" class="pwd1"/></div>
        <div class="code-box"><input type="text" class="code" placeholder="请输入验证码" maxlength="6" v-model="codeNum"
                                     @blur="inputBlur"/>
        </div>
        <div class="icon5">
          <mobile-code ref="timerBtn" class="btn" v-on:run="sendCode"></mobile-code>
        </div>
      </div>
      <div class="opt-box">
        <div class="select-box"><input type="checkbox" class="checkbox" :class="{'select-icon': choice}"
                                       @click="checkItem"/></div>
        <div class="protocol" @click="protocol">我已阅读，并同意《用户协议与隐私政策》</div>
      </div>
      <div class="btn-box">
        <button type="button" class="sure" @click="register">注册</button>
      </div>
    </div>
  </div>

</template>

<script>
  import EtHeader from "../components/EtHeader";
  import {baseUrl} from "../../../config/env";
  import MobileCode from "../components/MobileCode";
  import {getSessionStore, getUrlKey, removeSessionStore, setSessionStore} from "../../../config/util";
  import md5 from 'js-md5';

  export default {
    name: "etRegister",
    components: {
      EtHeader,
      MobileCode
    },
    data() {
      return {
        phone: "",
        password: "",
        codeNum: "",
        token1: "",
        token2: "",
        choice: false,
        showIcon: false,
        hideIcon: false,
        pwdType: "password",
        pwdIcon: require("../images/login/eyes_close.png"),
        workId: getUrlKey('id'),
        pageType: getUrlKey('pageType'),
        identity: ''
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      if (getSessionStore('et_phone')) {
        this.phone = getSessionStore('et_phone');
      }
      if (getSessionStore('et_pwd')) {
        this.password = base64.decode(getSessionStore('et_pwd'));
      }
      if (getSessionStore('et_code_num')) {
        this.codeNum = getSessionStore('et_code_num');
      }
    },
    methods: {
      backPage() {
        removeSessionStore("et_phone");
        removeSessionStore("et_pwd");
        removeSessionStore("et_code_num");
        if (this.pageType == 2) {
          this.$router.push({
            path: '/jobQuick',
            query: {
              'workAddress': this.$route.query.workAddress,
              'workPost': this.$route.query.workPost,
              'workWage': this.$route.query.workWage,
              'age': this.$route.query.age,
              'sex': this.$route.query.sex
            }
          });
        } else {
          this.$router.push({path: "/jobDetail", query: {'id': this.workId}});
        }
      },
      toLoginPage() {
        removeSessionStore("et_phone");
        removeSessionStore("et_pwd");
        removeSessionStore("et_code_num");
        this.$router.push({
          path: '/etLogin',
          query: {
            'id': this.workId,
            'pageType': this.pageType,
            'workAddress': this.$route.query.workAddress,
            'workPost': this.$route.query.workPost,
            'workWage': this.$route.query.workWage,
            'age': this.$route.query.age,
            'sex': this.$route.query.sex
          }
        });
      },
      checkItem() {
        this.choice = !this.choice;
      },
      checkIcon() {
        let phone = this.phone;
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(phone.trim())) {
          this.showIcon = false;
          this.hideIcon = true;
        } else {
          this.showIcon = true;
          this.hideIcon = false;
        }
      },
      changeType() {
        this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
        this.pwdIcon = this.pwdIcon == require("../images/login/eyes_open.png") ? require("../images/login/eyes_close.png") : require("../images/login/eyes_open.png");
      },
      checkPwd() {//校验密码
        let pwd = this.password;
        if (pwd == "") {
          this.$vux.toast.text("密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("密码不能包含中文", "middle");
          return;
        } else if (pwd.length < 6 || pwd.length > 16) {
          this.$vux.toast.text("密码长度为6-16位");
          return;
        }
        return true;
      },
      checkPhone() {//校验手机号码
        let phone = this.phone;
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (phone == "") {
          this.$vux.toast.text("手机号码不能为空", "middle");
          return;
        }
        if (!reg.test(phone)) {
          this.$vux.toast.text("手机号码格式错误", "middle");
          return;
        }
        return true;
      },
      checkCode() {//校验验证码
        let reg = /^[0-9]*$/;
        let code = this.codeNum;
        if (code == "") {
          this.$vux.toast.text("验证码不能为空", "middle");
          return;
        } else if (!reg.test(code)) {
          this.$vux.toast.text("验证码格式不正确", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.phone;
        if (this.checkPhone() && this.checkPwd()) {
          this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=0").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=0" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      register() {//注册
        let phone = this.phone;
        let pwd = this.password;
        let code = this.codeNum;
        if (this.checkPhone() && this.checkPwd() && this.checkCode()) {
          if (!this.choice) {
            this.$vux.toast.text("请阅读并勾选协议", "middle");
            return;
          }
          //校验验证码
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=0&code=" + code + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              this.$vux.loading.show({
                text: '加载中',
              });
              //注册
              let data = {
                "phone": phone,
                "password": md5(pwd),
                "type": 0,
                "upIdentity": this.identity,
                "platform": 'ZY'
              };
              this.axios.post(baseUrl + "/work_other/add_user", data).then((res) => {
                let resultObj = res.data;
                this.$vux.loading.hide();
                if (resultObj.code == 0 && resultObj.data > 0) {
                  removeSessionStore("et_phone");
                  removeSessionStore("et_pwd");
                  removeSessionStore("et_code_num");
                  let base64 = require('js-base64').Base64;
                  setSessionStore("et_user_sign", base64.encode(resultObj.data));

                  if (this.pageType == 2) {
                    this.$router.push({
                      path: "/jobQuick",
                      query: {
                        'workAddress': this.$route.query.workAddress,
                        'workPost': this.$route.query.workPost,
                        'workWage': this.$route.query.workWage,
                        'age': this.$route.query.age,
                        'sex': this.$route.query.sex
                      }
                    });
                  } else {
                    this.$router.push({path: "/jobDetail", query: {'id': this.workId, "markType": 1}});
                  }
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  return;
                }
              }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      protocol() {//协议
        let base64 = require('js-base64').Base64;
        setSessionStore("et_phone", this.phone);
        setSessionStore("et_pwd", base64.encode(this.password));
        setSessionStore("et_code_num", this.codeNum);
        this.$router.push("/protocol");
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .et-login
    wh(100%, 100%)
    background: #f5f5f5
    .et-login-content
      display: flex
      position: relative
      wh(100%, 4.587rem)
      bg-image("../images/login/registbg.png", 100%, 100%)
      .content-menu
        display: flex
        position: absolute
        left: 0
        right: 0
        bottom: -0.373rem
        margin: auto
        wh(4.8rem, 0.853rem)
        border-radius: 0.427rem
        box-shadow: 0rem 0rem 0.267rem 0rem rgba(0, 0, 0, 0.2)
        background: #fff
        .menu-btn
          flex: 1
          font-size: 0.427rem
          fj(center, center)
          color: rgba(60, 175, 255, 1)
        .menu-title01
          border-top-left-radius: 0.427rem
          border-bottom-left-radius: 0.427rem
        .menu-title02
          border-top-right-radius: 0.427rem
          border-bottom-right-radius: 0.427rem
        .menu-active
          color: #fff
          background: linear-gradient(-90deg, rgba(165, 130, 255, 1), rgba(60, 175, 255, 1))
    .et-register-box
      width: 100%
      margin-top: 0.8rem
      .wrap-box
        display: flex
        align-items: center
        margin: 0 auto
        width: 82.67%
        height: 1.2rem
        border-bottom: 0.013rem solid #E0E0E0
        margin-bottom: 0.48rem
        .icon1
          width: 0.787rem
          .phone1
            width: 0.533rem
            height: 0.533rem
        .icon3
          width: 0.787rem
          .pwd1
            width: 0.533rem
            height: 0.533rem
        .input-box
          width: auto
          .phone2
            width: 100%
            height: 100%
            font-size: 0.4rem
            color: #333
            background: #f5f5f5
        .pwd-box
          width: auto
          .pwd2
            width: 100%
            height: 100%
            font-size: 0.4rem
            color: #333
            background: #f5f5f5
        .icon2
          width: 0.533rem
          height: 0.533rem
          margin-left: auto
          .phone3
            width: 100%
            height: 100%
        .icon4
          width: 0.533rem
          height: 0.533rem
          margin-left: auto
          .pwd3
            width: 100%
            height: 100%
        .code-box
          width: 60%
          .code
            width: 100%
            height: 100%
            font-size: 0.4rem
            color: #333
            background: #f5f5f5
        .icon5
          width: auto
          height: 0.4rem
          margin-left: auto
          font-size: 0.4rem
          .btn
            line-height: 0.4rem
            text-align: center
            color: rgba(60, 175, 255, 1)
            background: #f5f5f5
      .distance
        margin-bottom: 0.4rem
      .opt-box
        display: flex
        align-items: center
        margin: 0 auto
        margin-bottom: 0.96rem
        width: 82.67%
        height: 0.32rem
        font-size: 0.32rem
        .select-box
          width: 0.32rem
          height 0.32rem
          margin-right: 0.24rem
          margin-left: 0.1rem
          .checkbox
            width: 100%
            height: 100%
            outline: none
            border: 1px solid #333
            border-radius: 0.04rem
            -webkit-appearance: none
          .select-icon
            background: url("../images/login/hock.png") no-repeat center rgba(60, 175, 255, 1)
            border-radius: 0.04rem
            background-size: 0.227rem 0.173rem
            border: none
        .protocol
          color: #3cafff
      .btn-box
        width: 100%
        height: 1.28rem
        text-align: center
        .sure
          wh(82.67%, 1.28rem)
          line-height: 1.28rem
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          size-color(0.48rem, rgba(255, 255, 255, 1))
</style>

